// 1.安包--导入
import axios from 'axios'
// 导入store模块，因为这里存放token，这个是js所以只能导入
import store from '@/store/index'// 可以通过store.state.xxx来访问vuex中的全局数据
// console.log(store)
import router from '@/router/index'

import { Loading } from 'element-ui'
// 2.调用axios.created（{}）方法
const request = axios.create({
  // 配置请求跟路径
  baseURL: 'http://www.liulongbin.top:3008'

})
let instance = null
// 添加请求拦截器
// Add a request interceptor
request.interceptors.request.use((config) => {
  // 在这里展示 loading 提示效果
  instance = Loading.service({
    background: 'rgba(0, 0, 0, 0.8)',
    spinner: 'el-icon-loading',
    text: '数据加载中...'
  })

  // Do something before request is sent
  // 1.判断用户请求的是否为'有权限的'接口
  // 1.1如果不是有权限的接口，不需要添加token
  // 1.2如果是有权限的接口，则徐亚欧威config.header对象，添加Authorization属性
  // 2.Authorization属性的值，必须是vuex中token的值
  // 3.解决一个问题:在utils/reque.js中如何获取到vuex中的token数据
  // url就是进行判断的
  if (config.url.startsWith('/my')) {
    // 请求的是一个有权限的接口，需要为config.headers对象，添加Authorization属性
    // 固定语法：cofig.headers.Authorization=那个模块存放tokne
    config.headers.Authorization = store.state.token
  }
  // console.log(config)

  return config
}, (error) => {
  instance.close()
  // Do something with request error
  return Promise.reject(error)
}
)

// 添加响应拦截器
// Add a response interceptor
request.interceptors.response.use((response) => {
  // Any status code that lie within the range of 2xx cause this function to trigger
  // Do something with response data
  // console.log(router)
  instance.close()
  return response
}, (error) => {
  instance.close()
  // Any status codes that falls outside the range of 2xx cause this function to trigger
  // Do something with response error
  // console.dir(error)

  if (error.response.status === 401) { // 判断如果返回这个结果是404
    store.commit('upToken', '')// 清空token
    router.push('/login')// 跳转登入页
  }
  return Promise.reject(error)
})
// 3.向外导出
export default request
